<template>
<!--   display:flex;表示给父容器使用弹性布局
        效果:所有的子元素横置且父元素会根据子元素浮动后的实际高度自动填充高度-->
 <div style="display: flex">
<!--   idCollapse为true，菜单栏折叠，宽度为64px，右侧占满剩余所有宽度-->
<!--   isCollapse为false，菜单栏展开，宽度为208px，右侧占满剩余所有宽度-->
   <div :style="{width: (isCollapse ? '64px' : '208px')}">
<!--     左侧菜单栏-->
     <el-menu background-color="#3c82f5" style="width: 100%;height: 100vh;" text-color="#fff"
              active-text-color="#ff0" :collapse="isCollapse" :collapse-transition="false"  @select="selectMenu"  unique-opened router>
<!--     左侧菜单栏的顶部条-->
       <el-row style="padding-top: 10px">
         <el-col :span="2"></el-col>
         <el-col :span="7" style="padding-left: 8px">
           <el-avatar src="/imgs/admin/logo.png" style="height: 35px;width:35px"></el-avatar>
         </el-col>
         <el-col :span="isCollapse? 0 : 13">
           <router-link to="/" style="text-decoration: none;font-weight: bold;position: relative;top: 8px;left: 2px;color: #fff">智慧车辆</router-link>
         </el-col>
       </el-row>
       <el-sub-menu index="1">
         <template #title>
           <el-icon style="font-size: 21px"><User/></el-icon>
           <span>用户管理</span>
         </template>
         <el-menu-item index="/user">用户列表</el-menu-item>
       </el-sub-menu>
       <el-sub-menu index="2">
         <template #title>
           <el-icon style="font-size: 21px"><Van/></el-icon>
           <span>车辆管理</span>
         </template>
         <el-menu-item index="/vehicle">车辆列表</el-menu-item>
       </el-sub-menu>
       <el-sub-menu index="3">
         <template #title>
           <el-icon style="font-size: 21px"><Location/></el-icon>
           <span>电子围栏</span>
         </template>
         <el-menu-item index="/geofence">围栏管理</el-menu-item>
       </el-sub-menu>
       <el-sub-menu index="4">
         <template #title>
           <el-icon style="font-size: 21px"><Place/></el-icon>
           <span>调度管理</span>
         </template>
         <el-menu-item index="/application">申请列表</el-menu-item>
         <el-menu-item index="/audit">调度审核</el-menu-item>
         <el-menu-item index="/distribute">车辆分配</el-menu-item>
       </el-sub-menu>
       <el-sub-menu index="5">
         <template #title>
           <el-icon style="font-size: 21px"><MessageBox/></el-icon>
           <span>数据字典</span>
         </template>
         <el-menu-item index="/dict">字典管理</el-menu-item>
       </el-sub-menu>
     </el-menu>
   </div>
   <div :style="{width: (isCollapse ? 'calc(100% - 64px)' : 'calc(100% - 208px)') }">
<!--     右侧顶部条-->
     <el-header style="background-color: #fff;height: 10vh;padding-top: 22px">
       <el-row :gutter="10">
         <el-col :span="18">
           <el-icon style="font-size: 20px" @click="changeCollapsed"><Expand/></el-icon>
         </el-col>
         <el-col :span="6">
           <el-dropdown style="float: right;">
            <span>
              {{ user.username }}
              <el-icon><arrow-down/></el-icon>
            </span>
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
         </el-col>
       </el-row>
       <!-- 面包屑导航  -->
       <el-breadcrumb separator="/" style="position:relative;top:20px;">
         <el-breadcrumb-item>首页</el-breadcrumb-item>
         <el-breadcrumb-item v-for="item in breadcrumb">{{item}}</el-breadcrumb-item>
       </el-breadcrumb>
     </el-header>
<!--     右侧主体内容-->
     <el-main style="height: 90vh;padding: 0;overflow-y: auto">
<!--       可变区域中的内容需要在各个子组件里写！如UserVIew.vue-->
       <router-view/>
     </el-main>
   </div>
 </div>
</template>

<script setup>
import {ref} from "vue";

const isCollapse=ref(false);

const changeCollapsed=()=>{
  isCollapse.value=!isCollapse.value;
}
const user=ref(getUser());

const logout=()=>{
  if(confirm('确定退出登录吗？')){
    //退出时清除当前登录的用户数据
    localStorage.removeItem('user');
    localStorage.removeItem('breadCrumb');
    // 跳转到登录页面
    window.location.href='/login';
    //再清空刚刚取出来的用户数据
    user.value='';
  }
}
//定义一个键值对数组来维护面包屑值与页面的对应关系
let map={
  "/user":['用户管理','用户列表'],
  "/vehicle":['车辆管理','车辆列表'],
  "/geofence":['电子围栏','围栏管理'],
  "/application":['调度管理','申请列表'],
  "/audit":['调度管理','调度审核'],
  "/distribute":['调度管理','车辆分配'],
  "/dict":['数据字典','字典管理']
}

//定义一个变量用来保存面包屑导航的当前值
const breadcrumb=ref(['用户管理','用户列表']||JSON.parse(localStorage.getItem('breadCrumb')));

//定义一个函数，只要选择某一个菜单项，立即切换到该菜单对应的页面
const selectMenu = (index)=>{
  //根据当前点击的菜单的index，从map中取出对应的面包屑值
  breadcrumb.value=map[index];
  //解决面包屑值刷新页面丢失的问题:每次选择完菜单项，面包屑的值也随之更新到localStorage中
  localStorage.setItem('breadCrumb',JSON.stringify(breadcrumb.value))
}
</script>
